<template>
	<view class="orderInfoBox">
		<view class="card">
			<view class="title">订单详情</view>
			<view class="list " >
				<view class="label">订单号</view>
				<view class="cont">{{ order.orderCode}}</view>
			</view>
			<view class="list " >
				<view class="label">内部单据号</view>
				<view class="cont">{{ order.serialNumber}}</view>
			</view>
			<view class="list " >
				<view class="label">订单类型</view>
				<view class="cont">{{ order.type}}</view>
			</view>
			<view class="list " >
				<view class="label">客户</view>
				<view class="cont">{{ order.name}}</view>
			</view>
			<view class="list " >
				<view class="label">订单状态</view>
				<view class="cont">{{ order.dealStatus}}</view>
			</view>
			<view class="list " >
				<view class="label">金额</view>
				<view class="cont">{{ order.amount}}</view>
			</view>
			<view class="list " >
				<view class="label">币种</view>
				<view class="cont">{{ order.currencyTypeCode}}</view>
			</view>
			<view class="list " >
				<view class="label">订单时间</view>
				<view class="cont">{{ order.dateStr}}</view>
			</view>
		</view>
		<view class="card">
			<view class="title">订单明细</view>
			<view class="order-info" v-for="(item,index) in order.orderDetails" :key="index">
				<view class="left">
					<image src="/static/img/goods/p1.jpg"></image>
				</view>

				<view class="right">
					<view class="order-title">
						{{item.name}}
					</view>
					<view class="name">商品编号：{{item.ecProductCode}}</view>
					<view class="name">金额：{{ item.price}}</view>
					<view class="columnBox">
						<view class="spec">箱数量：{{item.salesDefaultPackaging}}</view>
						<view class="spec">包数量：{{ item.salesDefaultQuantity}}</view>
					</view>
					<view class="columnBox">
						<view class="spec">数量：{{ item.count}}</view>
						<view class="spec">规格：{{ item.specificationNames}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					info:{
						orderNum: '322432423',
						orderType: '普通订单',
						documentNum: '437723711',
						customer: '周华',
						store	: '匈牙利牛仔店面',
						currency: '匈牙利福林',
						price: '299',
						discount: '99',
						money: '200',
						salesman: '管理员',
						remarks: '老会员了给点优惠吧',
					},
				
					detail: [{
							img: '/static/img/goods/p1.jpg',
							title: 'GXC982-1 欧洲原装进口',
							goodNum: '2323223',
							boxNum: 1,
							boxInfoNum: 20,
							packNum: 1,
							number: 1,
							gift: false,
							price: 100,
							money: 98,
						},
						{
							img: '/static/img/goods/p1.jpg',
							title: 'GXC982-1 欧洲原装进口',
							goodNum: '2323223',
							boxNum: 1,
							boxInfoNum: 20,
							packNum: 1,
							number: 1,
							gift: false,
							price: 100,
							money: 98,
						}, {
							img: '/static/img/goods/p1.jpg',
							title: 'GXC982-1 欧洲原装进口',
							goodNum: '2323223',
							boxNum: 1,
							boxInfoNum: 20,
							packNum: 1,
							number: 1,
							gift: false,
							price: 100,
							money: 98,
						}
					]
				}
			}
		},
		onShow() {
			//页面显示时，加载订单信息
			uni.getStorage({
				key: 'order',
				success: ret => {
					console.log(ret.data)
					this.order = ret.data;
				}
			});
		},
	}
</script>

<style lang="scss" scoped>
	.orderInfoBox {
		.card {
			margin: 20rpx;
			padding: 10rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 40rpx #eee;

			.title {
				position: relative;
				padding-left: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 10rpx;

				&::before {
					position: absolute;
					top: 50%;
					left: 10rpx;
					transform: translateY(-50%);
					content: '';
					width: 5rpx;
					height: 20rpx;
					background-color: #007AFF;
				}
			}

			.list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				padding: 10rpx;
				overflow: hidden;

				.label {
					flex-shrink: 0;
				}

				.cont {
					color: #666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.order-info {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;

				.left {
					flex-shrink: 0;
					width: 25vw;
					height: 25vw;

					image {
						width: 25vw;
						height: 25vw;
						border-radius: 10upx;
					}
				}

				.right {
					width: 100%;
					margin-left: 20upx;
					position: relative;

					.order-title {
						font-size: 30rpx;
					}

					.name {
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.columnBox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;

						.spec {
							color: #666;
							font-size: 22upx;
						}
					}

					.price-number {
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						// justify-content: flex-end;
						font-size: 22upx;
						color: #333;
						display: flex;
						align-items: flex-end;

						.time {
							color: #666;
						}

						.innerMoney {
							margin-left: auto;
							flex-shrink: 0;
							display: flex;
						}

						.price {
							font-size: 24upx;
							margin-right: 5upx;
						}
					}
				}
			}

		}
	}
</style>
